<link rel="stylesheet" href="__CDN__/assets/addons/calendar/fullcalendar/dist/fullcalendar.css">
<style>
    .fc-day.selected {
        background: #e0f2be !important;
    }

    .fc-event.fc-completed {
        text-decoration: line-through;
    }

    .fc-event.fc-expired {
        background: #999 !important;
        border-color: #999 !important;
    }

    .calendar-trash {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 52px;
        text-align: center;
        line-height: 52px;
        color: #e74c3c;
        background-color: #f2dede;
        display: none;
    }

    .fc .fc-toolbar .calendar-trash .fa {
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
    }

    .fc .fc-toolbar .calendar-trash > * {
        float: none
    }

    body .dialog-event .layui-layer-content {
        padding: 15px;
    }

    #add-form .msg-box {
        position: absolute;
        top: -25px;
        right: 0;
    }

    #add-form.n-default .msg-wrap {
        position: relative;
    }

    ul.fc-color-picker li a {
        position: relative;
    }

    ul.fc-color-picker li a.active:after {
        font-family: FontAwesome;
        content: "\f00c";
        position: absolute;
        z-index: 1000;
        top: 4px;
        left: 7px;
        font-size: 11px;
        color: #fff;
    }

    .external-event a {
        color: #fff;
    }

    body {
        height: auto;
    }
</style>

<style data-render="darktheme">
    body.darktheme .box-header.with-border {
        color: #ccc;
        border-color: #404040;
    }

    body.darktheme .fc-unthemed th, body.darktheme .fc-unthemed td, body.darktheme .fc-unthemed thead,
    body.darktheme .fc-unthemed tbody, body.darktheme .fc-unthemed .fc-divider,
    body.darktheme .fc-unthemed .fc-row, body.darktheme .fc-unthemed .fc-content,
    body.darktheme .fc-unthemed .fc-popover, body.darktheme .fc-unthemed .fc-list-view,
    body.darktheme .fc-unthemed .fc-list-heading td {
        border-color: #262626;
    }

    body.darktheme .fc-state-default {
        filter: invert(1) hue-rotate(180deg);
        background-image: none;
        box-shadow: none;
    }

    body.darktheme .fc-widget-header {
        background-color: #262626;
    }

    body.darktheme .fc-unthemed td.fc-today {
        background-color: #262626;
    }
</style>

<section class="">
    <div class="row">
        <div class="col-md-3">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h4 class="box-title">{:__('Exist event')}</h4>
                </div>

                <div class="box-body">
                    <!-- the events -->
                    <div id="external-events">
                        {foreach $eventList as $k=>$v}
                        <div class="external-event" data-id="{$v.id|htmlentities}" data-title="{$v.title|htmlentities}" data-background="{$v.background|htmlentities}" style="background-color:{$v.background|htmlentities};color:#fff;">{$v.title|htmlentities} <a href="javascript:" class="pull-right btn-remove-event" data-id="{$v.id|htmlentities}"><i class="fa fa-close"></i></a></div>
                        {/foreach}
                        <div class="checkbox">
                            <label for="drop-remove">
                                <input type="checkbox" id="drop-remove">
                                {:__('Remove after drop')}
                            </label>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">{:__('Add event')}</h3>
                </div>
                <div class="box-body">
                    <form id="add-form" action="calendar/addevent" role="form" method="post">
                        <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                            <input type="hidden" name="row[background]" value="#18bc9c"/>
                            <ul class="fc-color-picker" id="color-chooser">
                                <li><a class="text-green active" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                                <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                            </ul>
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon"><i class="fa fa-list-ol fa-fw"></i></span>
                            <input id="event-title" name="row[title]" data-rule="required" type="text" class="form-control" placeholder="{:__('Title tips')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon"><i class="fa fa-link fa-fw"></i></span>
                            <input id="event-url" name="row[url]" class="form-control" type="text" placeholder="{:__('Link tips')}">
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <span class="input-group-addon"><i class="fa fa-tags fa-fw"></i></span>
                            <select name="row[classname]" class="form-control" id="">
                                <option value="">{:__('None')}</option>
                                <option value="btn-dialog">{:__('New Dialog')}</option>
                                <option value="btn-addtabs">{:__('New Addtabs')}</option>
                                <option value="btn-ajax">{:__('New Ajax')}</option>
                            </select>
                        </div>
                        <div class="input-group" style="margin-bottom:10px;">
                            <label> <input id="c-type-event" name="type" value="event" type="radio" checked> {:__('Add to event')}</label> &nbsp;
                            <label> <input id="c-type-calendar" name="type" value="calendar" type="radio"> {:__('Add to calendar')}</label>
                        </div>
                        <div class="input-group" id="daterange" style="margin-bottom:10px;display:none;">
                            <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                            <input id="c-starttime" style="margin-bottom:-1px;" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[starttime]" type="text" value="{:date('Y-m-d 00:00:00')}">
                            <input id="c-endtime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[endtime]" type="text" value="{:date('Y-m-d 23:59:59')}">
                        </div>
                        <div class="">
                            <button type="submit" class="btn btn-primary">{:__('Add')}</button>
                            <button type="reset" class="btn btn-default">{:__('Reset')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <div class="box box-solid">
                <div class="box-body no-padding">
                    <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>

<script type="text/html" id="dayrighttpl">
    <ul class="dropdown-menu fullcalendar-contextmenu" id="dayrightmenu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-date="<%=date%>" data-action="add">添加事件</a></li>
    </ul>
</script>

<script type="text/html" id="eventrighttpl">
    <ul class="dropdown-menu fullcalendar-contextmenu" id="eventrightmenu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="edit">编辑</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="normal">标记为未完成</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="completed">标记为已完成</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="delete">删除</a></li>
    </ul>
</script>

<script type="text/html" id="edittpl">
    <form id="edit-form" action="calendar/edit/ids/<%=id%>" role="form" method="post">
        <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
            <input type="hidden" name="row[background]" value="<%=background%>"/>
            <ul class="fc-color-picker" id="color-chooser">
                <li><a class="text-green <%=background=='#18bc9c'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-aqua <%=background=='#1688f1'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-blue <%=background=='#1688f1'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-light-blue <%=background=='#4397fd'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-teal <%=background=='#39CCCC'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-yellow <%=background=='#f39c12'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-orange <%=background=='#FF851B'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-red <%=background=='#f75444'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-purple <%=background=='#605ca8'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-fuchsia <%=background=='#F012BE'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-muted <%=background=='#777777'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
                <li><a class="text-navy <%=background=='#001F3F'?'active':''%>" href="#"><i class="fa fa-square"></i></a></li>
            </ul>
        </div>
        <div class="input-group" style="margin-bottom:10px;">
            <span class="input-group-addon"><i class="fa fa-list-ol fa-fw"></i></span>
            <input id="event-title" name="row[title]" data-rule="required" type="text" class="form-control" placeholder="{:__('Title tips')}" value="<%=title%>">
        </div>
        <div class="input-group" style="margin-bottom:10px;">
            <span class="input-group-addon"><i class="fa fa-link fa-fw"></i></span>
            <input id="event-url" name="row[url]" class="form-control" type="text" placeholder="{:__('Link tips')}" value="<%=url%>">
        </div>
        <div class="input-group" style="margin-bottom:10px;">
            <span class="input-group-addon"><i class="fa fa-tags fa-fw"></i></span>
            <select name="row[classname]" class="form-control" id="">
                <option value=""
                <%=classname==''?'selected':''%>>{:__('None')}</option>
                <option value="btn-dialog"
                <%=classname=='btn-dialog'?'selected':''%>>{:__('New Dialog')}</option>
                <option value="btn-addtabs"
                <%=classname=='btn-addtabs'?'selected':''%>>{:__('New Addtabs')}</option>
                <option value="btn-ajax"
                <%=classname=='btn-ajax'?'selected':''%>>{:__('New Ajax')}</option>
            </select>
        </div>
        <div class="input-group" id="daterange" style="margin-bottom:10px;">
            <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
            <input id="c-starttime" style="margin-bottom:-1px;" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[starttime]" type="text" value="<%=starttime_text%>">
            <input id="c-endtime" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[endtime]" type="text" value="<%=endtime_text%>">
        </div>
        <div class="input-group" style="margin-bottom:10px;">
            <label for="c-status-normal"><input type="radio" name="row[status]" id="c-status-normal" value="normal" <%=status=='normal'?'checked':''%> /> 未完成</label>
            &nbsp;
            <label for="c-status-completed"><input type="radio" name="row[status]" id="c-status-completed" value="completed" <%=status=='completed'?'checked':''%> /> 已完成</label>
        </div>
        <div class="">
            <button type="submit" class="btn btn-primary">{:__('Ok')}</button>
            <button type="reset" class="btn btn-default">{:__('Reset')}</button>
        </div>
    </form>
</script>
